<template>
  <div class="member">
    <a-breadcrumb style="margin: 16px 0">
      <a-breadcrumb-item>主页</a-breadcrumb-item>
      <a-breadcrumb-item>成员关系管理</a-breadcrumb-item>
    </a-breadcrumb>
  </div>

  <a-button
    type="primary"
    style="margin-bottom: 10px"
    @click="AddMemberForm = true"
  >
    <template #icon><UsergroupAddOutlined /></template>
    添加家族成员
  </a-button>
  <a-table
    :columns="columns"
    :data-source="data"
    :pagination="pagination"
    :loading="loading"
    @change="handleTableChange"
  >
    <template #gender="{ record }">
      <a-tag color="#108ee9" v-if="record.gender == 1"
        ><ManOutlined /> 男
      </a-tag>
      <a-tag color="pink" v-else><WomanOutlined /> 女 </a-tag>
    </template>
    <template #operation="{ record }">
      <a-button
        type="primary"
        style="margin-right: 10px"
        @click="addMate(record)"
        size="small"
        v-if="record.mate_id == 0"
      >
        添加伴侣
      </a-button>
      <a-button
        type="primary"
        style="margin-right: 10px"
        @click="addChild(record)"
        size="small"
        v-if="record.mate_id != 0"
        >添加子女</a-button
      >
      <a-button
        type="primary"
        style="margin-right: 10px"
        size="small"
        @click="addBrothers(record)"
        >添加兄弟姐妹</a-button
      >
    </template>
  </a-table>

  <AddMemberForm
    :visible="AddMemberForm"
    @change="setAddMemberForm"
  ></AddMemberForm>
  <AddMateForm
    :visible="AddMateForm"
    :userinfo="addMateObj"
    @change="setAddMetaForm"
  ></AddMateForm>
  <AddChild
    :visible="AddChild"
    :userinfo="addChildObj"
    @change="setAddChildForm"
  ></AddChild>
  <AddBrothers
    :visible="AddBrothersForm"
    :userinfo="addBrothersObj"
    @change="setAddBrothers"
  ></AddBrothers>
</template>

<script>
import {
  ManOutlined,
  PlusCircleOutlined,
  WomanOutlined,
  UsergroupAddOutlined,
} from "@ant-design/icons-vue";
import { getList } from "@/request/api";
import AddMemberForm from "../components/AddMemberForm";
import AddMateForm from "../components/AddMateForm";
import AddChild from "../components/AddChild";
import AddBrothers from "../components/AddBrothers";

const columns = [
  {
    title: "姓名",
    dataIndex: "nickname",
    key: "nickname",
  },
  {
    title: "性别",
    dataIndex: "gender",
    key: "gender",
    slots: { customRender: "gender" },
  },
  {
    title: "出生日期",
    dataIndex: "birthdate",
    key: "birthdate",
  },
  {
    title: "操作",
    key: "operation",
    dataIndex: "operation",
    slots: { customRender: "operation" },
  },
];

export default {
  name: "Relation",
  data() {
    return {
      columns,
      pagination: {
        total: 0,
        size: "large",
        defaultPageSize: 10,
        current: 1,
        pageSize: 10,
        showTotal: (total) => `共 ${total} 条数据`,
      },
      data: [],
      loading: false,
      AddMemberForm: false,
      AddMateForm: false,
      AddChild: false,
      AddBrothersForm: false,
      addMateObj: {},
      addChildObj: {},
      addBrothersObj: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      getList({
        page: this.pagination.current,
        limit: this.pagination.pageSize,
      }).then((res) => {
        if (res.code == 0) {
          this.loading = false;
          this.data = res.data.list;
          this.pagination.total = res.data.count;
        }
      });
    },
    handleTableChange: function (pagination, filters, sorter) {
      this.pagination = pagination;
      this.getList();
    },
    setAddMemberForm: function (status) {
      this.AddMemberForm = status;
      this.getList();
    },
    addMate: function (obj) {
      this.addMateObj = obj;
      this.AddMateForm = true;
    },
    setAddMetaForm: function (status) {
      this.AddMateForm = status;
      this.getList();
    },
    addChild: function (obj) {
      this.addChildObj = obj;
      this.AddChild = true;
    },
    setAddChildForm: function (status) {
      this.AddChild = status;
      this.getList();
    },
    setAddBrothers: function (status) {
      this.AddBrothersForm = status;
      this.getList();
    },
    addBrothers: function (obj) {
      this.addBrothersObj = obj;
      this.AddBrothersForm = true;
    },
  },
  components: {
    ManOutlined,
    PlusCircleOutlined,
    WomanOutlined,
    UsergroupAddOutlined,
    AddMemberForm,
    AddMateForm,
    AddChild,
    AddBrothers,
  },
};
</script>

<style scoped></style>
